<template>
    <div class="d1">
        <el-button>添加</el-button>
        <el-button>同步菜单</el-button>
        <el-button>删除菜单</el-button>
    </div>


    <!-- 表格 -->
    <el-table
      :data="tableData"
      style=" margin-bottom: 20px"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      border
    >
      <el-table-column prop="date" label="名称" width="100px" />
      <el-table-column prop="name" label="类型" width="80px" />
      <el-table-column prop="address" label="菜单URL"  />
      <el-table-column prop="address" label="菜单KEY"  />
      <el-table-column prop="address" label="排序号"  />
      <el-table-column label="操作" fixed="right">
    <template v-slot="scope">
      <!-- 使用自定义方法判断是否为最底层节点 -->
      <template v-if="isBottomLevelNode(scope.row)">
        <a @click="handleEdit(scope.row)">修改</a>
        <a @click="handleDelete(scope.row)">删除</a>
      </template>
    </template>
      </el-table-column>
    </el-table>
</template>


<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref(true)
const isBottomLevelNode = (row: any) => {
  return !row.children || row.children.length === 0
}
const handleEdit = (row: any) => {
  console.log('修改', row)
}
const handleDelete = (row: any) => {
  console.log('删除', row)
}
const tableData = [
  {
    id: 1,
    date: '1',
    name: '1',
    address: '1',
    children: [
      {
        id: 31,
        date: '1',
        name: '1',
        address: '1',
        
      },
      {
        id: 32,
        date: '1',
        name: '1',
        address: '1',
      },
    ],
  },
  {
    id: 2,
    date: '1',
    name: '1',
    address: '1',
  },
  {
    id: 3,
    date: '1',
    name: '1',
    address: '1',
    children: [
      {
        id: 31,
        date: '1',
        name: '1',
        address: '1',
       
      },
      {
        id: 32,
        date: '1',
        name: '1',
        address: '1',
      },
    ],
  },
  {
    id: 4,
    date: '1',
    name: '1',
    address: '1',
  },
]

</script>


<style scoped>
.d1 {
    border-radius: 3px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #dedfe0;
    
}
</style>